<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id = "div">

    </div>

</body>
<!-- 引入依赖 ,引入的时候，必须就按照这个步骤-->
<script src="../React-js/react.development.js" type="text/javascript"></script>
<script src="../React-js/react-dom.development.js" type="text/javascript"></script>

<script src="../React-js/babel.min.js"></script>

<script type="text/babel">

    // const p1 = {name:"张三",age:"18",sex:"女"}
    // const p2 = {...p1,name : "111"};
    // p1.name = "sss";
    // console.log(p2)

    // let arr3 = [1,2,3,4];
    // const s = arr3.reduce((pre,result)=>{
    //     return pre+result;  
    // })
    // console.log(s);

    class Person extends React.Component{
        render(){
            return (
                <ul>
                    <li>{this.props.name}</li>
                    <li>{this.props.age}</li>
                    <li>{this.props.sex}</li>
                </ul>
            )
        }
    }
    //在js中可以使用{...p}来复制一个对象，但是这个地方并不是复制对象，而是babel+react通过展开运算符，展开了一个对象
    //但是只能在标签中进行使用
    const p = {name:"张三",age:"18",sex:"女"}
   // ReactDOM.render(<Person name="tom" age = "41" sex="男"/>,document.getElementById("div"));
   ReactDOM.render(<Person {...p}/>,document.getElementById("div"));



</script>
</html>